<template>
  <div class="tuijian" @scroll="gun" ref="gunju">
      <van-swipe @change="onChange" class="my-swipe" :autoplay="4000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in banner" :key="index">
          <span>{{item.model.title}}</span>
          <img :src="item.model.cover" alt="">
          </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{current + 1}}<span>/{{bannerlength}}</span></div>
        </template>
      </van-swipe>

      <div class="centent" >
        <div class="centent-item" v-for="(item,index) in textcontent" :key="index" >
          <img :src="item.cover" alt="" @click="dianji(item.id)">
          <div class="message-time">
            <img class="im1" src="../assets/眼睛.png" alt="">
            <span class="sp1">{{kann[index]}}</span>
            <img class="im2" src="../assets/点赞.png" alt="">
            <span class="sp2">{{zann[index]}}</span>
            <span class="sp3" >{{time1[index]}}</span>
          </div>
          <div class="text">
            {{item.title}}
          </div>
          <div class="bottom">
          <span>{{item.author.userinfo.username}}</span>
          <van-cell  @click="showShare = true" >
           <img src="../assets/竖着.png" alt="" >
          </van-cell>
            <van-share-sheet
             v-model="showShare"
             title="立即分享给好友"
             :options="options"
             @select="onSelect"
           />
          </div>
        </div>
      </div>

     
      <div class="centent-two" v-for="(item,index) in twobanner" :key="index">
          <div class="top">
            <div class="topleft">
            <img :src="item.creator.avatar" alt="">
            <span>{{item.creator.username}}</span>
            </div>
            <div class="topright">
               <img src="../assets/竖着.png" alt="">
            </div>
          </div>

          <p>{{item.title}}</p>
          <img :src="item.cover" alt="">

          <div class="bottom">
             <span>立即查看</span>
             <span>推广</span>
          </div>
      </div>

       <div class="centent" >
        <div class="centent-item" v-for="(item,index) in twocontent" :key="index" >
          <img :src="item.cover" alt="" @click="dianji(item.id)">
          <div class="message-time">
            <img class="im1" src="../assets/眼睛.png" alt="">
            <span class="sp1">{{kann1[index]}}</span>
            <img class="im2" src="../assets/点赞.png" alt="">
            <span class="sp2">{{zann1[index]}}</span>
            <span class="sp3" >{{time2[index]}}</span>
          </div>
          <div class="text">
            {{item.title}}
          </div>
          <div class="bottom">
          <span>{{item.author.userinfo.username}}</span>
          
          <van-cell  @click="showShare = true" >
           <img src="../assets/竖着.png" alt="" >
          </van-cell>
            <van-share-sheet
             v-model="showShare"
             title="立即分享给好友"
             :options="options"
             @select="onSelect"
           />
          </div>
        </div>
      </div>

     <div class="centent-three">
       <div class="top" v-for="(item,index) in author" :key="index" >
         <p>{{item.attribute.header.title}}</p>
       </div>
       <div class="centent-big" >
         <div class="centent-box" >

          <div class="centent-item" v-for="(item,index) in authoritem" :key="index" @click="yonghu(item.model.resource.id)">
           <img :src="item.model.resource.avatar" alt="">
          
            <p class="p1">{{item.model.resource.username}} <img class="im3" v-if="item.model.resource.vip_flag===1" src="../assets/vip.png" alt=""></p>
           <p class="p2">{{item.model.resource.count.count_article}}作品 {{item.model.resource.count.count_follower}}粉丝</p>
           <p class="p3">{{item.model.resource.occupation}}</p>
           <div class="btn">
             <span>+关注</span>
           </div>
         </div>
 
         </div>
      </div>
     </div>


      <div class="centent" >
        <div class="centent-item" v-for="(item,index) in nextcontent" :key="index" >
          <img :src="item.cover" alt="" @click="dianji(item.id)">
          <div class="message-time">
            <img class="im1" src="../assets/眼睛.png" alt="">
            <span class="sp1">{{kann2[index]}}</span>
            <img class="im2" src="../assets/点赞.png" alt="">
            <span class="sp2">{{zann2[index]}}</span>
            <span class="sp3" >{{time3[index]}}</span>
          </div>
          <div class="text">
            {{item.title}}
          </div>
          <div class="bottom">
          <span>{{item.author.userinfo.username}}</span>
          
          <van-cell  @click="showShare = true" >
           <img src="../assets/竖着.png" alt="" >
          </van-cell>
            <van-share-sheet
             v-model="showShare"
             title="立即分享给好友"
             :options="options"
             @select="onSelect"
           />
          </div>
        </div>
      </div>
     
     
  </div>
</template>

<script>
import { Toast } from "vant";
//引入无缝滚动

export default {
  created() {
    this.gettuijian();
  },
  
  data() {
    return {
      active: 2,
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      current: 0,
      banner: [],
      bannerlength:'',
      content: [],
      text: [],
      textcontent: [],
      twobanner: [],
      twocontent: [],
      threecontent:[],
      //触底加载的内容
      next:16,
      nextnumber:21,
      chubanner:[],
      nextcontent:[],
      author:[],
      //作者栏
      authoritem:[],
      time1:[],
      kann:[],
      zann:[],

      time2:[],
      kann1:[],
      zann1:[],

      time3:[],
      kann2:[],
      zann2:[]

      
    };
  },
  methods: {
    //点击视频跳转详情
    dianji(id){
      this.$router.push({name:'message',query:{id:id}})
    },
    //用户主页
    yonghu(id){
      this.$router.push({name:'author',query:{id:id}})
    },
    //跳转创作人页面
    // authormessage(title){
    
    // },
    //视频时间
    formatTime(second) {
      var minutes = Math.floor(second / 60);
      minutes = minutes >= 10 ? minutes : "0" + minutes;
      var seconds = Math.floor(second % 60);
      seconds = seconds >= 10 ? seconds : "0" + seconds;
      return minutes + ":" + seconds;
    },
    //视频点赞数
       formatNumber(num) {
      num = Number(num);
      if (num == 0) {
        return num + "";
      } else if (num >= 1 && num <= 10000) {
        return num + "";
      } else if(num > 10000){
        return (num / 10000).toFixed(1) + "w";
      }else{
        return num;
      }
    },
    //分享弹出
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    onChange(index) {
      this.current = index;
    },
    //触底的事件
    gun() {
      if (
        this.$refs.gunju.scrollHeight -
          Math.ceil(this.$refs.gunju.scrollTop) ===
        this.$refs.gunju.clientHeight
      ) {
        //让每次请求的数据换
        this.next=this.next+6,
        this.nextnumber=this.nextnumber+6
        if(this.next===46 ||this.nextnumber===51){
          this.next=1
          this.nextnumber=6
        }
       
        
        
        //传实参
        this.getneirong(this.next,this.nextnumber)
      }
    },
    //推荐页面数据
    gettuijian() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/xpc/home/recommend",
        params: {},
      }).then(result => {
         
        if (result.status === 200) {
          //轮播图
          this.banner = result.data.data.children[0].children;
          this.bannerlength=this.banner.length
          this.text = result.data.data.children;
          //拿到轮播图下面的12项数据
          for (let i = 0; i <= 13; i++) {
           
            if (this.text[i].type === "uiMiddleCard") {
              this.content.push(this.text[i]);
            }
          }
          for (let j = 0; j < this.content.length; j++) {
            this.textcontent.push(this.content[j].children[0].model.resource);
          }
        

        //点赞和观看数量
         this.textcontent.forEach(v=> {
            let time=this.formatTime(v.duration)
            this.time1.push(time)
            let kan=this.formatNumber(v.count.count_view)
            let zan=this.formatNumber(v.count.count_like)
            this.kann.push(kan)
            this.zann.push(zan)
          
         });
       
          //拿到第二个大图标下面的数据
          for (let a = 13; a <= 19; a++) {
            if (this.text[a].type === "uiBigCard") {
              this.twobanner.push(this.text[a].children[0].model.resource);
            } else {
              this.twocontent.push(this.text[a].children[0].model.resource);
            }
          }
          this.twocontent.forEach(v=>{
             let time=this.formatTime(v.duration)
            this.time2.push(time)
            let kan=this.formatNumber(v.count.count_view)
            let zan=this.formatNumber(v.count.count_like)
            this.kann1.push(kan)
            this.zann1.push(zan)
          })
          

          //拿到推荐创作人数据
          for(let g=20;g<=this.text.length-1;g++){    
           
            if(this.text[g].type==="uiCollectionSlideOne"){
              this.author.push(this.text[g])
              this.authoritem.push(this.text[g].children)
              this.authoritem=this.authoritem[0]
            }
          }
        
        }
      }).catch(err=>{
       
      });
    },
    
    //触底后再请求另外数据
    getneirong(next,nextnumber){
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/xpc/home/recommend",
        params: {},
      }).then(result=>{
       
        if(result.status===200){
          for(let h=next;h<=nextnumber;h++){
           
            if (result.data.data.children[h].type === "uiMiddleCard") {
               this.nextcontent.push(result.data.data.children[h].children[0].model.resource)
            }
            
            
          }
          

          //点赞和观看数量
         this.nextcontent.forEach(v=> {
            let time=this.formatTime(v.duration)
            this.time3.push(time)
            let kan=this.formatNumber(v.count.count_view)
            let zan=this.formatNumber(v.count.count_like)
            this.kann2.push(kan)
            this.zann2.push(zan)
          
         });
        }
      }).catch(err=>{
        
      })
    }
  },
};
</script>

<style lang="less" scoped>
.tuijian {
  width: 95%;
  height: calc(100vh);
  overflow-y: auto;
  padding: 10px;
  background-color: rgb(242, 242, 242);
}
.my-swipe {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    img {
      width: 100%;
      height: 200px;
    }
    span {
      position: absolute;
      top: 85%;
      left: 5%;
      font-size: 16px;
      color: white;
    }
  }
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 20px;
  color: white;
  
  span {
    padding-left: 2px;
    font-size: 14px;
    color: white;
  }
}

.centent {
  width: 100%;
  margin-bottom: 10%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .message-time{
      width: 80%;
      height: 20px;
      margin-top: -25px;
      margin-left: 8px;
      display: flex;
      justify-content: space-between;
      background-color:#959494;
      .im1{
        width: 15px;
        height: 15px;
      }
      .im2{
        width: 15px;
        height: 15px;
        margin-left: 7px;
      }
      .sp1{
        margin-top: 2px;
        color: white;
        
      }
      .sp2{
        margin-top: 2px;
        color: white;
      }
      .sp3{
        margin-top: 2px;
        margin-left: 25%;
        color: white;
      }
  }
  .centent-item {
    width: 48%;
    height: 180px;
    margin-top: 10px;
    background-color: white;
    img {
      width: 100%;
      height: 100px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .text {
      width: 80%;
      height: 38px;
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;
      font-weight: bold;
      margin-top: 5px;
      margin-left: 10%;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .bottom {
      width: 90%;
      height: 30px;
      display: flex;
      margin-left: 10%;
      margin-top: 3%;
      .van-cell__value--alone {
        margin-left: 40px;
        margin-top: -10px;
        // position: absolute;
        // left: 50%;
        // top:-5%
      }
      .van-popup {
        padding-bottom: 40px;
      }
      span {
        width: 100px;
        height: 30px;
        font-size: 13px;
        color: #959494;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      img {
        width: 15px;
        height: 20px;
        margin-left: 50%;
      }
    }
  }
}

.centent-two {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  background-color: white;
  // margin-bottom: 10%;
  p {
    font-size: 13px;
    font-weight: bold;
    margin-left: 20px;
    margin-top: 5px;
  }
  img {
    width: 100%;
  }
  .top {
    display: flex;
    height: 30px;
    width: 100%;
    justify-content: space-between;
    img {
      width: 20px;
      height: 20px;
    }
    .topleft {
      width: 100px;
      height: 30px;
      line-height: 30px;
      display: flex;
      margin-left: 20px;
      img {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 1px solid #ddd;
      }
      span {
        font-size: 13px;
        margin-left: 10px;
      }
    }
    .topright {
      margin-right: 10px;
      img {
        margin-top: 5px;
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    span:nth-child(1) {
      margin-left: 20px;
    }
    span:nth-child(2) {
      margin-right: 10px;
    }
  }
}

.centent-three {
  width: 100%;
  height: 200px;
  padding-bottom: 30px;
  .top {
    display: flex;
    width: 100%;
    height: 30px;
    line-height: 30px;
    justify-content: space-between;
    p {
      font-size: 20px;
      font-weight: bold;
      margin-top: 0px;
      margin-left: 10px;
    }
    span {
      font-size: 13px;
      color: rgb(183, 182, 182);
    }
  }
  
  .centent-big {
    width: 100%;
    height: 200px;
    margin-top: 15px;
    padding-bottom: 80px;
    .centent-box{
      white-space: nowrap;
      height: 170px;
      overflow-x: scroll;
    }
    .centent-item {
      width: 150px;
      height: 160px;
      margin-left: 10px;
      border-radius: 10px;
      text-align: center;
      display: inline-block;
      background-color: white;
   
    }
    
     
    .p1 {
      width: 100%;
      height: 20px;
      line-height: 20px;
      margin-top: 0px;
      font-size: 15px;
      font-weight: bold;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
       .im3{
       width: 15px;
       height: 15px;
       position: relative;
       top:3px
      
       
     }
    }
  
    .p2 {
      width: 100px;
      height: 30px;
      margin-top: -10px;
      font-size: 12px;
      color: rgb(154, 152, 152);
      margin-left: 20%;
    }
    .p3 {
      width: 100px;
      height: 20px;
      margin-top: -15px;
      font-size: 12px;
      color: rgb(154, 152, 152);
      margin-left: 17%;
    }
    .btn {
      margin-top: -10px;
      margin-left: 28%;
      width: 70px;
      height: 30px;
      border-radius: 20px;
      text-align: center;
      line-height: 30px;
      background-color: rgb(228, 75, 57);
      span {
        letter-spacing: 2px;
        color: white;
      }
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #ddd;
    }
  }
}
</style>